//我的账户
<template>
    <div style="background-color: #e5e5e5;">
        <div class="container">
            <div class="user-wrapper"
                 style="padding-top:60px!important;margin:0px auto;width:100%!important;">
                <div style="width:160px;background:#fff;margin-left:7rem;float:left;">
                    <div class="user-header">
                        <div class="list">
                            <p class="s"><span class="tt tt1"><img src="/static/img/wo_de_zhang_hu.png" alt=""></span>{{$t('u_wdzh')}}
                            </p>
                            <p class="x" :class="p == 1 ? 'active':''"
                               @click="gotoRoutel('/user/account/account_msg',1)">{{$t('u_aqzx')}}</p>
                        </div>
                        <div class="list">
                            <p class="s"><span class="tt tt2"><img src="/static/img/zi_chan_guanli_li2.png"
                                                                   alt=""></span>{{$t('u_zcgl')}}</p>
                            <p class="x" :class="p == 2 ? 'active':''" @click="gotoRoutel('/user/account/zz',2)">
                                {{$t('u_bbzc')}}</p>
                            <p class="x" :class="p == 3 ? 'active':''" @click="gotoRoutel('/user/coin/coin_in',3)">
                                {{$t('u_cbjl')}}</p>
                            <p class="x" :class="p == 4 ? 'active':''" @click="gotoRoutel('/user/coin/coin_out',4)">
                                {{$t('u_tbjl')}}</p>
                            <p class="x" :class="p == 5 ? 'active':''" @click="gotoRoutel('/user/coin/coin_turn',5)">
                                {{$t('u_zbjl')}}</p>
                        </div>
                    </div>
                </div>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapMutations, mapState, mapActions} from "vuex";
    import mixins from '../../assets/js/mixin'

    export default {
        mixins: [mixins],
        data() {
            return {
                msg: "我的账户",
                p: 1
            };
        },
        methods: {
            huoquurl() {
                let a = this.$route.path
                if (a == '/user/account/account_msg') {
                    this.p = 1
                } else if (a == '/user/account/zz') {
                    this.p = 2
                } else if (a == '/user/coin/coin_in') {
                    this.p = 3
                } else if (a == '/user/coin/coin_out') {
                    this.p = 4
                } else if (a == '/user/trade_trust/delegate_management') {
                    this.p = 5
                } else if (a == '/user/trade_trust/deal_inquiry') {
                    this.p = 6
                } else if (a == '/user/account/invitation') {
                    this.p = 7
                } else if (a == '/user/trade_trust/fanlimingxi') {
                    this.p = 8
                }
               console.log("luyou" + this.$route.path)
            },
            gotoRoutel(url, p) {
                // 路由跳转
                this.p = p || 1
                this.$router.push({
                    path: url,
                    query: {
                        redirect: this.$route.path
                    }
                });
            },
            exists() { // 验证用户是否绑定手机号
                this.$http.post('/nb-web/api/user/phone/exists', {
                    account: this.$cookie.getCookie('account').replace(/\"/g, "")
                }).then(res => {
                    if (res.data.code == '001') {
                        this.isBindPhoneChange(true) // 绑定手机号
                    } else {
                        this.isBindPhoneChange(false) // 未绑定手机号
                    }
                })
            },
            ...mapMutations(['navUrlChange']),
            ...mapActions(['isBindPhoneChange'])
        },
        computed: {
            ...mapState(['userUrl'])
        },
        created() {
            this.navUrlChange('user');
            this.exists();
            this.huoquurl()
        }
    };
</script>
<style>
    .container::-webkit-scrollbar {
        display: none;
    }

</style>
<style lang="scss">

    .user-wrapper::-webkit-scrollbar {
        display: none;
    }

    .user-wrapper {
        margin: 20px auto 50px;
        background-color: #e5e5e5;
        display: flex;
        overflow-y: scroll !important;
        .user-header {
            // height: 54px;
            // border-bottom: 1px solid #eaeaea;
            padding: 0 28px;
            margin-bottom: 29px;

            .list {
                border-bottom: 2px solid rgba(153, 167, 200, 0.2);
                text-align: center;
                padding-top: 14px;
                padding-bottom: 14px;
            }

            .list:nth-child(4) {
                border: none;
            }

            .tt {
                position: absolute;
                left: -6px;
                top: 10px;
                height: 22px;
                width: 22px
            }

            .x {
                font-family: PingFangSC-Medium;
                font-size: 16px;
                color: #1F3F87;
                letter-spacing: 0;
                line-height: 43px;
                height: 43px;
                cursor: pointer;
                width: 160px;
                margin-left: -28px;

                &.active {
                    background: #F1F9FF;
                }
            }

            .s {
                font-family: PingFangSC-Semibold;
                font-size: 16px;
                color: #99A7C8;
                letter-spacing: 0;
                line-height: 43px;
                height: 43px;
                cursor: pointer;
                position: relative;
            }

            .user-header-item {
                line-height: 54px;
                font-size: 16px;
                color: #333;
                font-weight: 700;
                float: left;
                padding: 0 20px;
                position: relative;
                cursor: pointer;

                &.active {
                    &::before {
                        content: "";
                        display: block;
                        height: 3px;
                        width: 100%;
                        background-color: #2d6df0;
                        position: absolute;
                        left: 0;
                        bottom: -1px;
                    }
                }
            }

        }
    }
</style>
